<template>
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import Bscoll from "better-scroll";
export default {
    name: "Scroll",
    props:{
        probeType:{
            type:Number,
            default:0
        },
        pullUpLoad:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return {
            scroll:null
        }
    },
    //挂载完成
    mounted() {
        //1.创建对象
        this.scroll = new Bscoll(this.$refs.wrapper,{
            probeType : this.probeType,
            pullUpLoad: this.pullUpLoad,  //上拉加载更多
            click: true,
            mouseWheel: true,
            observeDOM: true,
            observeImage: true
        })
        //2.监听滚动位置
        this.scroll.on('scroll',position=>{
            this.$emit("scroll",position)
        })
        //3.监听滚到到最后的事件 上拉事件
        this.scroll.on('pullingUp',()=>{
            this.$emit('pullingUp')
        })
    },
    methods:{
        scrollTo(x,y,time=300){
            //回到指定的位置
            this.scroll.scrollTo(x,y,time);
        },
        finishPullUp(){//刷新上拉加载更多 下次可以再次加载
            this.scroll.finishPullUp();
        },
        refresh(){//刷新
            this.scroll.refresh();
        },
        getScrollY(){
            return this.scroll ? this.scroll.y : 0 ;
        }
    }
}
</script>

<style scoped>

</style>
